<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--head部分-->
<head>
    <title>商场管理系统</title>
    <link href="/static/layui/css/layui.css" rel="stylesheet"/>
    <link rel="shortcut icon" href="../resources/favicon.ico" th:href="@{/static/favicon.ico}"/>
    <script type="text/javascript" src="/static/js/jquery/jquery-3.3.1.min.js"></script>
    <link rel="shortcut icon" href="/static/images/logo.png" type="image/x-icon" />
    <link type="text/css" rel="stylesheet" href="/static/css/style.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
</head>
<style>
    html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        position: absolute;
        z-index: 0;
        background: url("https://gitee.com/zyb_01_01/blog-images/raw/master/img/background.jpg");
        background-size: 100% 100%;
        background-repeat: no-repeat;

    }
    #container{
        float: left;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: 1;
        width: 310px;
        height: 340px;
    } 
    a:hover{
        color: #5FB878;
    }

</style>
<body>



<div id="container" class="layui-anim layui-anim-upbit">

            <div id="header"><span style="font-size: 30px;color: #009688;font-weight: bolder;" >欢迎使用</span>&nbsp;商城后台管理系统</div>

            <div id="bd" class="layui-form">
                <input class="img1" id="username" type="text" name="userName" required  lay-verify="required" placeholder="请输入账号" autocomplete="off" >

                <input class="img2" id="password" type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" >

<!--                <div th:if="${msg} != null" style="text-align: center;color: red">-->
<!--                    <span th:text="${msg}"></span>-->
<!--                </div>-->
                <div style="width: 240px; margin-top: 30px;margin-left: 30px">
                    <button id="loginBtn" class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="login" onclick="userLogin()">登录</button>
                </div>
            </div>
            <div  style="text-align: center;color: #2F4056;margin-top: 5px">
                <a href="/user/forget"> 忘记密码？</a>
            </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="/static/layui/layui.js" ></script>
<script type="text/javascript" >
    // 用户登录
    function userLogin() {
        // 必须输入用户名、密码、验证码
        var username = $("#username").val();
        var password = $("#password").val();
        // var vertify = $("#vertify").val();

        if (undefined == username || "" == username) {
            layer.alert("请输入用户名！");
            return;
        }

        if (undefined == password || "" == password) {
            layer.alert("请输入密码！");
            return;
        }

        // if (undefined == vertify || "" == vertify) {
        //     layer.alert("请输入验证码！");
        //     return;
        // }
        $.ajax({
            url: "/user/login",
            type: "POST",
            data: {
                userName: $("#username").val(),
                password: $("#password").val()
            },
            dataType: "JSON",
            success: function (result) {
                if (200 == result.code) {
                    location.href = "/user/home";
                } else {
                    layer.alert("用户名或密码错误，请重新输入！");
                }
            },
            error: function () {
                layer.alert("亲，系统正在升级中，请稍后再试！");
            }
        });
    }
</script>


</body>
</html>